<!--
 * @Author: Y先森
 * @Date: 2023-04-11 16:35:21
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-10 14:09:43
 * @FilePath: \y-website\src\views\Home.vue
-->
<template>
  <div class="home" :class="{ 'bg-zinc-100': isMobileTerminal }">
    <!-- PC端轮播图 -->
    <div class="carousel my-2" v-if="!isMobileTerminal">
      <el-carousel indicator-position="none" :autoplay="false" :interval="5000" height="310px">
        <el-carousel-item class="px-4">
          <div class="flex flex-row justify-around items-center px-4 ">
            <div class="flex flex-col w-1/2">
              <div class="">
                <h1 class="font-semibold text-[1.2rem] mb-1   dark:text-zinc-50">Hello!</h1>
                <h1 class="font-semibold text-[1rem] mb-1 text-zinc-900 dark:text-zinc-50">欢迎来到我的<span class="text-main">小破站</span>~</h1>
                <p class="text-m dark:text-indigo-dark-l text-zinc-400">
                  It includes several aspects such as technology exchange, creative sharing, Design Showcase.
                </p>
              </div>
            </div>
            <div class="">
              <img v-lazy class="block w-[644px] h-full" src="@/assets/images/banner-01.png" alt="" />
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item> xxx </el-carousel-item>
      </el-carousel>
    </div>
   
    <!-- 数据模块 -->
    <div class="census my-2">
      <el-row :gutter="20" class="p-2 box-border">
        <el-col :sm="12" :md="6" :lg="6" class="relative">
          <span v-if="isMobileTerminal" class="absolute left-0 right-0 text-center text-lg top-3">小站数据模块</span>
          <el-row class="h-32" justify="center">
            <el-col :xs="12" :sm="24">
              <div class="flex flex-col justify-center items-center h-full">
                <count-to :startVal="0" :endVal="50" :duration="3000" class="font-semibold text-xlg"></count-to>
                <p class="text-sm text-zinc-500 dark:text-indigo-dark-l">今日访问数量</p>
                <span class="w-8 h-[5px] flex mt-1 rounded overflow-hidden">
                  <span class="w-1/2 h-full block bg-green-default"></span>
                  <span class="w-1/2 h-full block bg-zinc-50"></span>
                </span>
              </div>
            </el-col>
            <el-col :xs="12" :sm="24">
              <div class="flex flex-col justify-center items-center h-full">
                <count-to :startVal="0" :endVal="205" :duration="3000" class="font-semibold text-xlg"></count-to>
                <p class="text-sm text-zinc-500 dark:text-indigo-dark-l">总访问数量</p>
                <span class="w-8 h-[5px] flex mt-1 rounded overflow-hidden">
                  <span class="w-1/2 h-full block bg-red-default"></span>
                  <span class="w-1/2 h-full block bg-zinc-50"></span>
                </span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :sm="12" :md="6" :lg="6">
          <div class="census-li rounded-2xl h-32  relative card-item">
            <div
              class="card-item-img absolute bg-green-default dark:bg-zinc-50 left-2 .shadow-xl shadow-sd-green dark:shadow-default top-0 z-10 w-8 h-8 rounded-[40%] flex justify-center items-center"
            >
              <m-svg-icon name="code" class="w-5 h-5" fillClass="text-zinc-50 dark:text-green-default"></m-svg-icon>
            </div>
            <div class="absolute bottom-0 bg-white dark:bg-green-default w-full h-28 rounded-lg px-3 pt-6">
              <div class="flex items-end justify-between">
                <h2 class="card-item-title text-lg font-semibold">技术分享</h2>
                <span class="text-xlg font-semibold text-green text-green-default dark:text-indigo-50">7</span>
              </div>
              <p class="text-m text-grey dark:text-indigo-dark-m my-3">对一些互联网技术技术跟难度进行自 我总结~</p>
              <div>
                <img src="" alt="" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :md="6" :lg="6">
          <div class="census-li rounded-2xl h-32  relative card-item">
            <div
              class="card-item-img absolute bg-red-default dark:bg-zinc-50 left-2 .shadow-xl shadow-sd-red dark:shadow-default top-0 z-10 w-8 h-8 rounded-[40%] flex justify-center items-center"
            >
              <m-svg-icon name="pen" class="card-item-img w-5 h-5" fillClass="text-zinc-50 dark:text-red-default"></m-svg-icon>
            </div>
            <div class="absolute bottom-0 bg-white dark:bg-red-default w-full h-28 rounded-lg px-3 pt-6">
              <div class="flex items-end justify-between">
                <h2 class="card-item-title text-lg font-semibold">灵感创作</h2>
                <span class="text-xlg font-semibold text-purple text-red-default dark:text-indigo-50">12</span>
              </div>
              <p class="text-m text-grey dark:text-indigo-dark-m my-3">我的日常记录，平时所想、记录旅游 、摄影…</p>
              <div>
                <img src="" alt="" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :md="6" :lg="6">
          <div class="census-li rounded-2xl h-32  relative card-item">
            <div
              class="card-item-img absolute bg-blue-default dark:bg-zinc-50 left-2 .shadow-xl shadow-sd-blue dark:shadow-default top-0 z-10 w-8 h-8 rounded-[40%] flex justify-center items-center"
            >
              <m-svg-icon name="palette" class="w-5 h-5" fillClass="text-zinc-50 dark:text-blue-default"></m-svg-icon>
            </div>
            <div class="absolute bottom-0 bg-white dark:bg-blue-default w-full h-28 rounded-lg px-3 pt-6">
              <div class="flex items-end justify-between">
                <h2 class="card-item-title text-lg font-semibold">设计展示</h2>
                <span class="text-xlg font-semibold text-blue text-blue-default dark:text-indigo-50">24</span>
              </div>
              <p class="text-m text-grey dark:text-indigo-dark-m my-3">以前的项目作品，以及原创设计</p>
              <div>
                <img src="" alt="" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { isMobileTerminal } from '@/utils/flexible'
import { onMounted } from 'vue'
import VanillaTilt from 'vanilla-tilt'

onMounted(() => {
  /**
   * 使用平滑的3D倾斜库
   */
   VanillaTilt.init(document.querySelectorAll('.card-item'), {
    max: 30, // 设置倾斜的最大角度
    speed: 3000
  })
})
</script>
<style scoped lang="scss">
.el-carousel__indicators {
  position: fixed !important;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.card-item {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}
.card-item-img {
    transform: translateZ(50px);
  }
  .card-item-title {
    transform: translateZ(50px);
  }
</style>
